<template>
  <div class="main">
    <p  class="main_text">车辆库存</p>
    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20 p20">
      <el-form :model="searchData">
        <div class="df fww">
          <el-form-item label="车牌号：">
            <el-input v-model="searchData.carId" placeholder="车牌号" class="mr20" style="width: 140px" />
          </el-form-item>
          <el-form-item label="车辆类型：">
            <el-input v-model="searchData.carType" placeholder="车辆类型" class="mr20" style="width: 140px" />
          </el-form-item>
          <el-form-item label="品牌：">
            <el-input v-model="searchData.brand" placeholder="品牌" class="mr20" style="width: 140px" />
          </el-form-item>
          <el-form-item label="车系：">
            <el-input v-model="searchData.series" placeholder="车系" class="mr20" style="width: 140px" />
          </el-form-item>
          <el-form-item label="车型：">
            <el-input v-model="searchData.modelName" placeholder="车型" class="mr20" style="width: 140px" />
          </el-form-item>
          <el-form-item label="是否过磅：">
            <el-select v-model="searchData.ifWeight" placeholder="是否过磅" class="mr20" style="width: 140px">
              <el-option label="是" value="true" />
              <el-option label="否" value="false" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否预处理：">
            <el-select v-model="searchData.pretreated" placeholder="是否预处理" class="mr20" style="width: 140px">
              <el-option label="是" value="true" />
              <el-option label="否" value="false" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否监销：">
            <el-select v-model="searchData.ifMonitor" placeholder="是否监销" class="mr20" style="width: 140px">
              <el-option label="监销" value="true" />
              <el-option label="不监销" value="false" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否已生成拆解单：">
            <el-select v-model="searchData.haveSheet" placeholder="是否已生成拆解单" style="width: 140px" class="mr20">
              <el-option label="已生成" value="true" />
              <el-option label="未生成" value="false" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="df">
              <el-button type="primary" @click="searchDataBtn">查询</el-button>
              <el-button type="primary" plain @click="resc">重置</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="cyr-flex">
      <div class="mb20">
<!--        <el-button type="primary" @click="drawer = true" v-if="roleList.write">车辆录入</el-button>-->
        <el-button type="primary" plain @click="exportExcel" v-if="roleList.write">导出所有车辆</el-button>
      </div>
      <div class="cyr-flex-box" >
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f0f6fe' }"
       :show-overflow-tooltip="true" v-adaptive border>
        <el-table-column label="编号" prop="id" width="60" />
        <el-table-column label="车牌号" prop="carInfo.value.号牌号码">
          <template #default="props">
            <el-text tag="span" style="cursor: pointer" @click="check(props.row)">{{
              props.row.carInfo.value.号牌号码
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="车辆类型" prop="carInfo.value.车辆类型" />
        <el-table-column label="品牌" prop="brand" />
        <el-table-column label="车系" prop="series" />
        <el-table-column label="车型" prop="modelName" />
        <!-- <el-table-column label="整备质量" prop="carInfo.value.整备质量" /> -->
        <el-table-column label="车辆颜色" prop="color" />
        <el-table-column label="是否监销" min-width="100">
          <template #default="props">
            <el-text v-if="props.row.ifMonitor == true">监销</el-text>
            <el-text v-else>不监销</el-text>
          </template>
        </el-table-column>
        <el-table-column label="入场编号" prop="incomeId" />
        <el-table-column label="入库时间" prop="createdAt" />
        <el-table-column label="是否过磅">
          <template #default="props">
            <el-tag v-if="props.row.ifWeight == true" type="success">已过磅</el-tag>
            <el-tag v-else type="info">未过磅</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否预处理" min-width="100">
          <template #default="props">
            <el-tag v-if="props.row.pretreatment == true" type="success">已预处理</el-tag>
            <el-tag v-else type="info">未预处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否生成拆解单" min-width="100">
          <template #default="props">
            <el-tag v-if="props.row.haveSheet == true" type="success">已生成</el-tag>
            <el-tag v-else type="info">未生成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template #default="props">
            <!-- <el-button v-if="props.row.ifWeight == false" size="small" link type="primary"
                            @click="weightSave(props.row)" :disabled="authorizeFlag">过磅</el-button> -->
            <!-- <el-button v-else-if="props.row.pretreatment == false" size="small" link type="success"
                            @click="preproSave(props.row)">预处理</el-button> -->
            <el-button size="small" link type="primary" @click="check(props.row)" v-if="roleList.read">查看</el-button>
          </template>
        </el-table-column>
        <!-- #################################### 分页 #################################### -->
      </el-table>
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
        @change="handleCurrentChange" />
      </div>
    </div>
    <!-- ############################################## 蒙层 ############################################## -->
    <!-- ****************************** 过磅 ****************************** -->
    <el-dialog v-model="centerDialogVisible" width="30%" align-center @close="closeDiag(ruleFormRef)">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">过磅</p>
        </div>
      </template>
      <el-form :model="weightData" ref="ruleFormRef" :rules="rules" class="df fdc aic" label-width="140">
        <el-form-item label="整备质量：" prop="curbWeight">
          <el-input v-model="weightData.curbWeight" placeholder="整备质量" class="mr20" disabled />
        </el-form-item>
        <el-form-item label="净重：" prop="weight">
          <el-input v-model="weightData.weight" placeholder="净重" class="mr20" />
        </el-form-item>
        <el-form-item label="其他扣杂：" prop="otherBuckle">
          <el-input v-model="weightData.otherBuckle" placeholder="其他扣杂" class="mr20" />
        </el-form-item>
        <el-form-item label="扣杂：" prop="buckle">
          <el-input v-model="weightData.buckle" placeholder="扣杂" class="mr20" />
        </el-form-item>
        <el-form-item label="皮重：" prop="tare">
          <el-input v-model="weightData.tare" placeholder="皮重" class="mr20" />
        </el-form-item>
        <el-form-item label="毛重：" prop="grossWeight">
          <el-input v-model="weightData.grossWeight" placeholder="毛重" class="mr20" />
        </el-form-item>
        <!-- <el-form-item label="备注：" prop="remarks">
                    <el-input v-model="weightData.remarks" placeholder="备注" type="textarea" class="mr20" />
                </el-form-item> -->
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="addWeightBtn(ruleFormRef)"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ****************************** 预处理 ****************************** -->
    <el-dialog v-model="preprocenterDialogVisible" width="30%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">预处理</p>
        </div>
      </template>
      <el-form :model="preproData" label-width="140">
        <el-form-item label="入场编号：">
          <el-text>{{ preproData.incomeId }}</el-text>
          <!-- <el-input v-model="preproData.incomeId" disabled placeholder="其他扣杂" class="mr20" /> -->
        </el-form-item>
        <el-form-item label="车牌号：">
          <el-text>{{ preproData.weight }}</el-text>
          <!-- <el-input v-model="preproData.weight" placeholder="其他扣杂" class="mr20" /> -->
        </el-form-item>
        <el-form-item label="车辆品牌：">
          <el-text>{{ preproData.carInfo.value.品牌型号 }}</el-text>
          <!-- <el-input v-model="preproData.carInfo.value.品牌型号" placeholder="其他扣杂" class="mr20" /> -->
        </el-form-item>
        <el-form-item label="车系：">
          <el-text>{{ preproData.carInfo.value.品牌型号 }}</el-text>
          <!-- <el-input v-model="preproData.carInfo.value.品牌型号" placeholder="扣杂" class="mr20" /> -->
        </el-form-item>
        <el-form-item label="车辆类型：">
          <el-text>{{ preproData.carInfo.value.车辆类型 }}</el-text>
          <!-- <el-input v-model="preproData.carInfo.value.车辆类型" placeholder="登陆皮重人员" class="mr20" /> -->
        </el-form-item>
        <el-form-item label="车架号：">
          <el-text>{{ preproData.carInfo.value.发动机号码 }}</el-text>
          <!-- <el-input v-model="preproData.carInfo.value.发动机号码" placeholder="毛重" class="mr20" /> -->
        </el-form-item>
        <el-form-item label="车辆颜色：">
          <el-text>{{ preproData.color }}</el-text>
          <!-- <el-input v-model="preproData.color" placeholder="备注" class="mr20" /> -->
        </el-form-item>
        <el-form-item label="净重：">
          <el-text>{{ preproData.weight }}</el-text>
          <!-- <el-input v-model="preproData.weight" placeholder="备注" class="mr20" /> -->
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="preprocenterDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addPreproBtn"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ****************************** 查看 ****************************** -->
    <el-dialog v-model="seeCenterDialogVisible" width="40%" align-center @close="closeDia">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">查看</p>
        </div>
      </template>
      <el-steps style="max-width: 100%" :active="activeStep" align-center class="mb20">
        <el-step title="待过磅" />
        <el-step title="待生成拆解单" />
        <el-step title="待预处理" />
        <el-step title="未拆解" />
        <el-step title="拆解中" />
        <el-step title="待上传两证" />
        <el-step title="已完成" />
      </el-steps>
      <el-form :model="checkData" label-width="140">
        <div class="df ais">
          <el-form-item label="号牌号码：" style="width: 48%">
            <el-text>{{ checkData.carInfo.value.号牌号码 }}</el-text>
          </el-form-item>
          <el-form-item label="品牌型号：" style="width: 48%">
            <el-text>{{ checkData.carInfo.value.品牌型号 }}</el-text>
          </el-form-item>
        </div>
        <div class="df ais">
          <el-form-item label="整备质量：" style="width: 48%">
            <el-text>{{ checkData.carInfo.value.整备质量 }}</el-text>
          </el-form-item>
          <el-form-item label="核定载人数：" style="width: 48%">
            <el-text>{{ checkData.carInfo.value.核定载人数 }}</el-text>
          </el-form-item>
        </div>
        <div class="df ais">
          <el-form-item label="车辆识别代码：" style="width: 48%">
            <el-text>{{ checkData.carInfo.value.车辆识别代号 }}</el-text>
          </el-form-item>
          <el-form-item label="车辆类型：" style="width: 48%">
            <el-text>{{ checkData.carInfo.value.车辆类型 }}</el-text>
          </el-form-item>
        </div>
        <div class="df ais">
          <el-form-item label="车辆颜色：" style="width: 48%">
            <el-text>{{ checkData.color }}</el-text>
          </el-form-item>

          <el-form-item label="入场编号：" style="width: 48%">
            <el-text>{{ checkData.incomeId }}</el-text>
          </el-form-item>
        </div>
        <div class="df ais">
          <el-form-item label="发动机号：" style="width: 48%">
            <el-text>{{ checkData.carInfo.value.发动机号码 }}</el-text>
          </el-form-item>
          <el-form-item label="入场时间：" style="width: 48%">
            <el-text>{{ checkData.createdAt }}</el-text>
          </el-form-item>

          <!-- <el-form-item label="是否过磅：" style="width: 48%;">
                        <el-tag v-if="checkData.ifWeight == true">已过磅</el-tag>
                        <el-tag type="warning" v-else>未过磅</el-tag>
                    </el-form-item> -->
        </div>
        <el-form-item label="车辆图片：">
          <img class="carImg" v-for="item in carImgArr" :key="item.id" :src="item.url" alt=""
            @click="previewCarImg(item.url)" />
        </el-form-item>
        <!-- <div class="df ais"> -->
        <!-- <el-form-item label="是否预处理：" style="width: 48%;">
                        <el-tag v-if="checkData.pretreatment == true">已处理</el-tag>
                        <el-tag type="warning" v-else>未处理</el-tag>
                    </el-form-item>
                    <el-form-item label="是否监销：" style="width: 48%;">
                        <el-tag v-if="checkData.ifWeight == true">监销</el-tag>
                        <el-tag type="warning" v-else>不监销</el-tag>
                    </el-form-item>
                </div>
                <div class="df ais">
                    <el-form-item label="是否已生成拆解单：" style="width: 48%;">
                        <el-tag v-if="checkData.haveSheet == true">已生成</el-tag>
                        <el-tag type="warning" v-else>未生成</el-tag>
                    </el-form-item>
              
                </div> -->
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="seeCenterDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ****************************** 车辆录入 ****************************** -->
    <el-drawer v-model="drawer" :with-header="false" size="50%" class="p20">
      <span style="font-size: 1.25rem; color: #3d3d3d; font-weight: bold">车辆录入</span>
      <!--******************* 基本信息 *******************-->
      <div class="part mt20">
        <p style="color: #1d2129" class="df aic">
          基本信息&nbsp;<el-button type="primary" link size="small" @click="rechargeMoneyDalog">充值可自动识别填充内容 ></el-button>
        </p>
      </div>
      <div class="df pt20">
        <div style="width: 35%">
          <el-button v-if="carType == 1" type="primary" link class="mb10"
            @click="weituoshuxiazai = true">委托书下载</el-button>
          <div class="df">
            <div class="mr10" v-if="carType == 1">
              <div class="upload111">
                <el-icon class="add">
                  <Plus />
                </el-icon>
                <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" :on-change="changeFile4">
                  <el-icon>
                    <Plus />
                  </el-icon>

                  <template #file="{ file }">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview4(file)">
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <span v-if="!disabled4" class="el-upload-list__item-delete" @click="handleRemove4(file)">
                          <el-icon>
                            <Delete />
                          </el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
                <el-dialog v-model="dialogVisible4" class="imgVisible" :modal="false">
                  <div style="
                      width: 100%;
                      height: 70vh;
                      overflow: scroll;
                      scroll-behavior: auto;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    ">
                    <img :src="dialogImageUrl4" alt="Preview Image" />
                  </div>
                </el-dialog>
              </div>
              <div style="color: #b2b2b2; font-size: 0.75rem" class="mt10 tac">营业执照</div>
            </div>
            <div v-if="carType == 1">
              <div class="up">
                <el-upload ref="uploadRef" class="upload-demo" action="#" :auto-upload="false" :on-change="fileUpload">
                  <template #trigger>
                    <el-button type="primary">选择文件</el-button>
                  </template>
                </el-upload>
              </div>
              <div style="color: #b2b2b2; font-size: 0.75rem" class="mt10 tac">委托书</div>
            </div>
          </div>
        </div>
        <div style="width: 65%">
          <el-form label-position="top" class="df jcsb fww">
            <el-form-item label="是否销户" style="width: 44%">
              <el-radio-group v-model="ifAccountClosure">
                <el-radio :label="true" size="small">是</el-radio>
                <el-radio :label="false" size="small">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否保留号牌号码" style="width: 44%">
              <el-radio-group v-model="ifRetainPlate">
                <el-radio :label="true" size="small">是</el-radio>
                <el-radio :label="false" size="small">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="车辆回收类别" style="width: 44%">
              <el-radio-group v-model="carType">
                <el-radio :label="0" size="small">私家车</el-radio>
                <el-radio :label="1" size="small">单位车</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--******************* 车主信息录入 *******************-->
      <div class="part mt20">
        <p style="color: #1d2129" v-if="carType == 0">车主信息</p>
        <p style="color: #1d2129" v-if="carType == 1">经办人信息</p>
      </div>
      <div class="pt20">
        <div class="df">
          <div class="df" style="width: 35%">
            <div class="mr10">
              <div class="upload111">
                <el-icon class="add">
                  <Plus />
                </el-icon>
                <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" :on-change="changeFile">
                  <el-icon>
                    <Plus />
                  </el-icon>

                  <template #file="{ file }">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                          <el-icon>
                            <Delete />
                          </el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
                <el-dialog v-model="dialogVisible" class="imgVisible" :modal="false">
                  <div style="
                      width: 100%;
                      height: 70vh;
                      overflow: scroll;
                      scroll-behavior: auto;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    ">
                    <img :src="dialogImageUrl" alt="Preview Image" />
                  </div>
                </el-dialog>
              </div>
              <div style="color: #b2b2b2; font-size: 0.75rem" class="mt10 tac">身份证(人像面)</div>
            </div>
            <div>
              <div class="upload111">
                <el-icon class="add">
                  <Plus />
                </el-icon>
                <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" :on-change="changeFile1">
                  <el-icon>
                    <Plus />
                  </el-icon>

                  <template #file="{ file }">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview1(file)">
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <span v-if="!disabled1" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                          <el-icon>
                            <Delete />
                          </el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
                <el-dialog v-model="dialogVisible1" class="imgVisible" :modal="false">
                  <div style="
                      width: 100%;
                      height: 70vh;
                      overflow: scroll;
                      scroll-behavior: auto;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    ">
                    <img :src="dialogImageUrl1" alt="Preview Image" />
                  </div>
                </el-dialog>
              </div>
              <div style="color: #b2b2b2; font-size: 0.75rem" class="mt10 tac">身份证(国徽面)</div>
            </div>
          </div>
          <div style="width: 65%">
            <el-form :rules="formDataRules" :model="formData" ref="formDataRef" label-position="top" class="df jcsb">
              <el-form-item v-if="carType == 0" label="车主姓名" style="width: 44%" prop="name">
                <el-input v-model="formData.name" placeholder="车主姓名" />
              </el-form-item>
              <el-form-item v-if="carType == 1" label="经办人姓名" style="width: 44%" prop="name">
                <el-input v-model="formData.name" placeholder="经办人姓名" />
              </el-form-item>
              <el-form-item label="联系电话" style="width: 44%" prop="phone">
                <el-input v-model="formData.phone" placeholder="联系电话" />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!--******************* 车主信息录入 *******************-->
      <div class="part mt20">
        <p style="color: #1d2129">车辆信息</p>
      </div>
      <div class="pt20">
        <div class="df">
          <div class="df" style="width: 35%">
            <div class="mr10">
              <div class="upload111">
                <el-icon class="add">
                  <Plus />
                </el-icon>
                <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" :on-change="changeFile2">
                  <el-icon>
                    <Plus />
                  </el-icon>

                  <template #file="{ file }">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview2(file)">
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <span v-if="!disabled2" class="el-upload-list__item-delete" @click="handleRemove2(file)">
                          <el-icon>
                            <Delete />
                          </el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
                <el-dialog v-model="dialogVisible2" class="imgVisible" :modal="false">
                  <div style="
                      width: 100%;
                      height: 70vh;
                      overflow: scroll;
                      scroll-behavior: auto;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    ">
                    <img :src="dialogImageUrl2" alt="Preview Image" />
                  </div>
                </el-dialog>
              </div>
              <div style="color: #b2b2b2; font-size: 0.75rem" class="mt10 tac">车辆行驶证(正本)</div>
            </div>
            <div>
              <div class="upload111">
                <el-icon class="add">
                  <Plus />
                </el-icon>
                <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1" :on-change="changeFile3">
                  <el-icon>
                    <Plus />
                  </el-icon>

                  <template #file="{ file }">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview3(file)">
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <span v-if="!disabled3" class="el-upload-list__item-delete" @click="handleRemove3(file)">
                          <el-icon>
                            <Delete />
                          </el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
                <el-dialog v-model="dialogVisible3" class="imgVisible" :modal="false">
                  <div style="
                      width: 100%;
                      height: 70vh;
                      overflow: scroll;
                      scroll-behavior: auto;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    ">
                    <img :src="dialogImageUrl3" alt="Preview Image" />
                  </div>
                </el-dialog>
              </div>
              <div style="color: #b2b2b2; font-size: 0.75rem" class="mt10 tac">车辆行驶证(副本)</div>
            </div>
          </div>
          <div style="width: 65%">
            <el-form :rules="carInfoRules" :model="carInfo" ref="carInfoRef" label-position="top" class="df jcsb fww">
              <el-form-item label="牌照号码" style="width: 44%" prop="号牌号码">
                <el-input v-model="carInfo.号牌号码" placeholder="牌照号码" @input="inputChange(formDataRef)" />
              </el-form-item>
              <el-form-item label="车辆类型" style="width: 44%" prop="车辆类型">
                <el-input v-model="carInfo.车辆类型" placeholder="车辆类型" />
              </el-form-item>
              <el-form-item label="品牌型号" style="width: 44%" prop="品牌型号">
                <el-input v-model="carInfo.品牌型号" placeholder="品牌型号" />
              </el-form-item>
              <el-form-item label="核定载人数" style="width: 44%" prop="核定载人数">
                <el-input v-model="carInfo.核定载人数" placeholder="核定载人数" />
              </el-form-item>
              <el-form-item label="使用性质" style="width: 44%" prop="使用性质">
                <el-select v-model="carInfo.使用性质" placeholder="使用性质">
                  <el-option label="营运" value="营运" />
                  <el-option label="非营运" value="非营运" />
                </el-select>
              </el-form-item>
              <el-form-item label="车辆识别代号(VIN码)" style="width: 44%" prop="车辆识别代号">
                <el-input v-model="carInfo.车辆识别代号" placeholder="车辆识别代号(VIN码)" />
              </el-form-item>
              <el-form-item label="发动机编号" style="width: 44%" prop="发动机号码">
                <el-input v-model="carInfo.发动机号码" placeholder="发动机编号" />
              </el-form-item>
              <el-form-item label="整备质量" style="width: 44%" prop="整备质量">
                <el-input v-model="carInfo.整备质量" placeholder="整备质量" />
              </el-form-item>
              <el-form-item label="车辆所在地址" style="width: 44%" prop="地址">
                <el-input v-model="carInfo.地址" placeholder="车辆所在地址" />
              </el-form-item>
              <el-form-item label="车辆颜色" style="width: 44%" prop="color">
                <el-input v-model="carInfo.color" placeholder="车辆颜色" />
              </el-form-item>
              <el-form-item label="总里程数" style="width: 44%">
                <el-input v-model="carInfo.mileage" placeholder="总里程数" />
              </el-form-item>
              <el-form-item label="整车残值款" style="width: 44%" prop="appraise">
                <el-input v-model="carInfo.appraise" placeholder="整车残值款" />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!--******************* 缺件情况 *******************-->
      <div class="part mt20">
        <p style="color: #1d2129">缺件情况</p>
      </div>
      <div class="pt20">
        <div class="df">
          <div style="width: 35%">
            <div class="df fdc">
              <el-radio-group v-model="formData.abnormalities" class="mb10" @change="abnormalities">
                <el-radio-button :label="true">完整</el-radio-button>
                <el-radio-button :label="false">异常</el-radio-button>
              </el-radio-group>
              <el-radio-group v-if="falg == true" v-model="formData.missingCase" class="mb10" @change="missingCase">
                <el-radio-button :label="false">废钢车</el-radio-button>
                <el-radio-button :label="true">缺件</el-radio-button>
                <!-- <el-radio-button :label="3">异常车</el-radio-button> -->
              </el-radio-group>
            </div>
            <div class="df ais">
              <el-icon color="#409eff" class="mr10">
                <Warning />
              </el-icon>
              <div style="font-size: 0.75rem; color: #b2b2b2; width: 70%">
                确认缺件后,点选右侧配件缺件数量,未缺件数量默认为零.
              </div>
            </div>
            <!-- <el-switch v-model="formData.mis" inline-prompt active-text="完整" inactive-text="异常" size="large" />
                        <el-switch v-model="formData.mis" inline-prompt active-text="缺件" inactive-text="火烧车" size="large" /> -->
          </div>
          <div style="width: 65%">
            <el-form v-if="missfalg != false" :model="formData" label-position="top" class="df jcsb fww">
              <el-form-item v-for="item in missingParts" :key="item.name" :label="item.name" style="width: 44%"
                class="df">
                <div style="width: 100%" class="df jcsb">
                  <el-slider size="small" class="mr20" style="width: 40%" v-model="item.number" :step="1"
                    :max="item.maxNumber" :min="0" show-stops />
                  <el-input-number size="small" style="width: 40%" v-model="item.number" :max="item.maxNumber"
                    :min="0" />
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button type="primary" plain @click="drawer = false">取消</el-button>
        <el-button type="primary" @click="carPutInbtn(carInfoRef)">&nbsp;确定&nbsp;</el-button>
      </template>
    </el-drawer>
    <!-- ****************************** 充值 ****************************** -->
    <el-dialog v-model="rechargeMoney" calss="rechargeMoney" width="40%"
      style="height: 33.75rem; border-radius: 1rem; overflow: hidden" align-center>
      <div class="recharge df">
        <div class="left"></div>
        <div class="right p20">
          <div style="width: 100%; height: 1.25rem" class="df aic jcsb">
            <div></div>
            <el-icon size="20" @click="rechargeMoney = false">
              <Close />
            </el-icon>
          </div>
          <!-- 充值类型 -->
          <div class="mt10 rechargeType">
            <p style="font-size: 0.875rem; font-weight: 500; color: #999999">充值类型</p>
            <div class="df jcsb mt10">
              <div v-for="item in rechargeType" :key="item.id" @click="rechargeTypeBtn(item)"
                :class="rechargeTypeID == item.id ? 'rechargeType_li_hover' : 'rechargeType_li'">
                {{ item.name }}
              </div>
              <div style="width: 32%"></div>
            </div>
          </div>
          <div class="rechargeMoney mt10">
            <p style="font-size: 0.875rem; font-weight: 500; color: #999999">充值数额</p>
            <div class="df jcsb fww">
              <div v-for="item in rechargeMoneyList" :key="item.id" @click="rechargeMoneyBtn(item)"
                :class="rechargeMoneyID == item.id ? 'rechargeMoney_li_hover' : 'rechargeMoney_li'">
                <p>{{ item.money }}<span>元</span></p>
                <p>{{ item.number }}次扫描额度</p>
              </div>
            </div>
          </div>
          <!-- 充值按钮 -->
          <div class="df jcc aic">
            <el-button class="mt20" type="primary" plain @click="rechargeMoney = false">取消</el-button>
            <el-button class="mt20" type="primary" @click="rechargeSaveBtn">充值</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 手写签名 -->
    <el-dialog v-model="signDialog" width="30%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">签名确认</p>
        </div>
      </template>
      <div style="width: 100%; height: 100%; background-color: #fff; border: 0.0625rem solid #ccc">
        <div class="df aic jcc">
          <canvas ref="canvas" class="jSignature" tabindex="0" @mousedown="onMouseDown" />
        </div>
        <!-- <footer slot="footer" class="dialog-footer df jcc mb10">
                    <el-button size="small" @click.native.prevent="clearPanel">取消</el-button>
                    <el-button size="small" type="primary" @click="confirm">确认签名</el-button>
                </footer> -->
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancle">取消</el-button>
          <el-button @click="clearPanel">清空</el-button>
          <el-button type="primary" @click="confirm" :loading="loading"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 委托书下载 -->
    <el-dialog v-model="weituoshuxiazai" width="30%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">委托书下载</p>
        </div>
      </template>
      <el-form>
        <el-form-item label="委托书地址：">
          <el-cascader placeholder="选择住址" v-model="adress" :options="optionsData" filterable style="width: 100%" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="weituoshuxiazai = false">取消</el-button>
          <el-button type="primary" @click="downLoad" :loading="loading"> 下载 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisibleImg" align-center width="70%">
      <div style="height: 70vh; width: 100%; background-color: #fff; overflow-y: scroll">
        <img style="width: 100%" :src="ImgdialogImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue';
import { exportFile } from '@/utils/exportFile.js';
// import Sign from '@/components/Sign.vue'
import { regionData } from 'element-china-area-data'; //获取地区
import { Edit, Close } from '@element-plus/icons-vue';
import {
  RequestScrapCarGetlistlimit,
  RequestGetweightSave,
  RequestScrapCarPretreatment,
  RequestBasicPersonRecognize,
  RequestBasicVehicleLicenseRecognizeFront,
  RequestBasicVehicleLicenseRecognizeBack,
  RequestMissingPartDeductionGetSettingByQuery,
  RequestAuthorizedLetterGetLetterModel,
  RequestOrderDetailRecyclerSetOrder,
  RequestCompaniesList,
  RequestEmployeeGetFunctionAuthorize,
  RequestRecognizeLeftAddRecognizeNum,
  RequestRecognizeLeftGetRecognizeFee,
  RequestScrapCarGetCarStatus,
  RequestScrapCarOutputExcel,
} from '@/api/path/index.js';
import { Delete, Download, Warning, Plus, ZoomIn } from '@element-plus/icons-vue';
import type { UploadFile } from 'element-plus';
import { formatTime, formatTimeHan } from '@/filters/index';
import { ElMessage } from 'element-plus';

/*------------------------------------- 按钮权限 -------------------------------------*/
import useAuthorize from '@/hooks/authorize';
let roleList = useAuthorize();
// import { useRouter } from "vue-router";
// const authorizeFlag = ref<any>();
const dialogVisibleImg = ref<any>(false);
const ImgdialogImageUrl = ref<any>('');
const previewCarImg = (e: any) => {
  dialogVisibleImg.value = true;
  ImgdialogImageUrl.value = e;
};
// const btnAuthority = () => {
//   // console.log(' useRouter()', useRouter().currentRoute.value.meta.title);
//   RequestEmployeeGetFunctionAuthorize(
//     useRouter().currentRoute.value.meta.title
//   ).then((res: any) => {
//     // console.log(res.resultObj);
//     if (res.resultObj == "W") {
//       authorizeFlag.value = false;
//     } else {
//       authorizeFlag.value = true;
//     }
//   });
// };
// btnAuthority();
/*------------------------------------- 按钮权限 -------------------------------------*/
const optionsData = regionData.map((item: any) => {
  const children = item.children.map((val: any) => {
    return {
      label: val.label,
      value: val.label,
    };
  });
  return {
    label: item.label,
    value: item.label,
    children: children,
  };
});
const adress = ref<any>('');
const downLoad = () => {
  loading.value = true;
  RequestAuthorizedLetterGetLetterModel(adress.value[0] + ',' + adress.value[1]).then((res: any) => {
    console.log(res);
    if (res.code == 0) {
      const link = document.createElement('a');
      link.href = res.resultObj;
      link.click();
      ElMessage.success('下载成功');
      weituoshuxiazai.value = false;
      loading.value = false;
    } else {
      ElMessage.error(res.msg);
      loading.value = false;
    }
  });
};
const ruleFormRef = ref<any>();
const ruleFormRef1 = ref<any>();
/*************************************** 查询 ***************************************/
const searchData = ref<any>({
  carId: '',
  carType: '',
  brand: '',
  ifWeight: '',
  pretreated: '',
  ifMonitor: '',
  haveSheet: '',
  modelName: '',
  series: '',
});
const searchDataBtn = () => {
  RequestScrapCarGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
    carId: searchData.value.carId,
    carType: searchData.value.carType,
    brand: searchData.value.brand,
    ifWeight: searchData.value.ifWeight,
    pretreated: searchData.value.pretreated,
    ifMonitor: searchData.value.ifMonitor,
    haveSheet: searchData.value.haveSheet,
    modelName: searchData.value.modelName,
    series: searchData.value.series,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.carInfo.value = JSON.parse(item.carInfo.value);
      item.createdAt = formatTime(item.createdAt);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
};
/*************************************** 重置 ***************************************/
const resc = () => {
  (searchData.value.carId = ''),
    (searchData.value.carType = ''),
    (searchData.value.brand = ''),
    (searchData.value.ifWeight = ''),
    (searchData.value.pretreated = ''),
    (searchData.value.ifMonitor = ''),
    (searchData.value.haveSheet = ''),
    (searchData.value.series = ''),
    (searchData.value.modelName = ''),
    currentPage.value = 1;
  getData();
};
const rules = reactive<any>({
  curbWeight: [{ required: true, message: '请输入整备质量', trigger: 'blur' }],
  weight: [{ required: true, message: '请输入净重', trigger: 'blur' }],
  otherBuckle: [{ required: true, message: '请输入其他扣杂', trigger: 'blur' }],
  buckle: [{ required: true, message: '请输入扣杂', trigger: 'blur' }],
  tare: [{ required: true, message: '请输入皮重', trigger: 'blur' }],
  grossWeight: [{ required: true, message: '请输入毛重', trigger: 'blur' }],
});
const tableData = ref<any>([]);
const weightData = ref<any>({
  curbWeight: '',
  weight: '',
  otherBuckle: '',
  buckle: '',
  tare: '',
  grossWeight: '',
  remarks: '',
});
const multipleSelection = ref<any>([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
const loading = ref<any>(false);
const centerDialogVisible = ref<any>(false);
const preprocenterDialogVisible = ref<any>(false);
const signDialog = ref<any>(false);
const seeCenterDialogVisible = ref<any>(false);
const weituoshuxiazai = ref<any>(false); //委托书下载弹窗
const drawer = ref<any>(false); //车辆录入
/* 分页器 */
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  // getData()
  searchDataBtn();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  // getData()
  searchDataBtn();
};
/* ************* 获取列表数据 ************* */
const total = ref<any>(0);
const currentPage = ref(1);
const pageSize = ref(10);
const companyAdress = ref<any>('');
const getData = () => {
  RequestCompaniesList(JSON.parse(localStorage.getItem('roleInfo')!).company).then((res: any) => {
    // console.log('res.resultObj[0].address', res.resultObj[0].address)
    carInfo.value.地址 = res.resultObj[0].address;
    companyAdress.value = res.resultObj[0].address;
  });
  RequestScrapCarGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.carInfo.value = JSON.parse(item.carInfo.value);
      item.createdAt = formatTime(item.createdAt);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
    // console.log(tableData.value);
  });
};
/* ************* 过磅 ************* */
const weightSave = (row: any) => {
  console.log(row.carInfo.value.整备质量);
  weightData.value.card = row.carInfo.value.号牌号码;
  weightData.value.curbWeight = row.carInfo.value.整备质量;
  weightData.value.scrapCarId = row.id;
  centerDialogVisible.value = true;
};
const addWeightBtn = async (formEl: any | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      RequestGetweightSave(weightData.value).then((res: any) => {
        if ((res.success = true)) {
          centerDialogVisible.value = false;
          getData();
        }
      });
    } else {
      console.log('error submit!', fields);
    }
  });
};
const resetForm = (formEl: any | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  centerDialogVisible.value = false;
};
const closeDiag = (formEl: any | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  centerDialogVisible.value = false;
};
/* ************* 添加过磅 ************* */
const preproData = ref();
const carId = ref();
const preproSave = (row: any) => {
  carId.value = row.id;
  preprocenterDialogVisible.value = true;
  preproData.value = row;
  console.log(preproData.value);
};
const addPreproBtn = () => {
  RequestScrapCarPretreatment(carId.value).then((res: any) => {
    console.log((res.success = true));
    if ((res.success = true)) {
      preprocenterDialogVisible.value = false;
      getData();
    }
  });
};
/* ************* 查看 ************* */
const activeStep = ref(1);
const checkData = ref();
const carImgArr = ref<any>([]);
const check = (row: any) => {
  console.log(row);
  seeCenterDialogVisible.value = true;
  RequestScrapCarGetCarStatus(row.id).then((res: any) => {
    activeStep.value = res.resultObj;
  });
  checkData.value = row;
  console.log(checkData.value);
  checkData.value.imgs.forEach((item: any) => {
    if (item.imageType == null) {
      carImgArr.value.push(item);
    }
  });
};
const closeDia = () => {
  carImgArr.value = [];
};
getData();
/* **************************************************** 车辆录入 **************************************************** */
const formData = ref<any>({
  name: '',
  phone: '',
  abnormalities: true, //异常情况
  missingCase: false, //缺件or火烧车
});
const missingParts = ref<any>([]);
const ifRetainPlate = ref<any>(false); //是否保留牌照号码
const ifAccountClosure = ref<any>(false); //是否销户
const carType = ref<any>(0); //车辆类型---单位车 1---私家车 0
const appraise = ref<any>(''); //回收价格
const carInfo = ref<any>({
  color: '',
  mileage: '',
  appraise: '',
});
/* ******************* 身份证正面 ******************* */
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const disabled = ref(false);
const handleRemove = (file: UploadFile) => { };
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
const fileRaw = ref();
const idCardArr = ref<any>([]);
const changeFile = (file: any) => {
  fileRaw.value = file.raw;
  let reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = (e: any) => {
    idCardArr.value.push(e.target.result);
  };
  let formDataD = new FormData();
  formDataD.append('personCard', fileRaw.value);
  /* 身份证正面识别 */
  RequestBasicPersonRecognize(formDataD).then((res: any) => {
    console.log(JSON.parse(res.resultObj).words_result.姓名.words);
    formData.value.identityCard = JSON.parse(res.resultObj).words_result.公民身份号码.words;
    formData.value.name = JSON.parse(res.resultObj).words_result.姓名.words;
    // formData.value.gender = JSON.parse(res.resultObj).words_result.性别.words
  });
};
/* ******************* 身份证背面 ******************* */
const dialogImageUrl1 = ref('');
const dialogVisible1 = ref(false);
const disabled1 = ref(false);
const handleRemove1 = (file: UploadFile) => { };
const handlePictureCardPreview1 = (file: UploadFile) => {
  dialogImageUrl1.value = file.url!;
  dialogVisible1.value = true;
};
const fileRaw1 = ref();
const changeFile1 = (file: any) => {
  fileRaw1.value = file.raw;
  let reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = (e: any) => {
    idCardArr.value.push(e.target.result);
  };
};
/* ******************* 车辆行驶证(正本) ******************* */
const dialogImageUrl2 = ref('');
const dialogVisible2 = ref(false);
const disabled2 = ref(false);
const handleRemove2 = (file: UploadFile) => { };
const handlePictureCardPreview2 = (file: UploadFile) => {
  dialogImageUrl2.value = file.url!;
  dialogVisible2.value = true;
};
const fileRaw2 = ref();
const driveLicenseArr = ref<any>([]);
const changeFile2 = (file: any) => {
  fileRaw2.value = file.raw;
  let reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = (e: any) => {
    driveLicenseArr.value.push(e.target.result);
  };
  let formDataD = new FormData();
  formDataD.append('vehicleLicense', fileRaw2.value);
  /* 行驶证识别 */
  RequestBasicVehicleLicenseRecognizeFront(formDataD).then((res: any) => {
    console.log(JSON.parse(res.resultObj).words_result);
    carInfo.value.车辆类型 = JSON.parse(res.resultObj).words_result.车辆类型.words;
    carInfo.value.使用性质 = JSON.parse(res.resultObj).words_result.使用性质.words;
    carInfo.value.发动机号码 = JSON.parse(res.resultObj).words_result.发动机号码.words;
    carInfo.value.品牌型号 = JSON.parse(res.resultObj).words_result.品牌型号.words;
    carInfo.value.住址 = JSON.parse(res.resultObj).words_result.住址.words;
    carInfo.value.号牌号码 = JSON.parse(res.resultObj).words_result.号牌号码.words;
    carInfo.value.车辆识别代号 = JSON.parse(res.resultObj).words_result.车辆识别代号.words;
  });
};
/* ******************* 车辆行驶证(副本) ******************* */
const dialogImageUrl3 = ref('');
const dialogVisible3 = ref(false);
const disabled3 = ref(false);
const handleRemove3 = (file: UploadFile) => { };
const handlePictureCardPreview3 = (file: UploadFile) => {
  dialogImageUrl3.value = file.url!;
  dialogVisible3.value = true;
};
const fileRaw3 = ref();
const changeFile3 = (file: any) => {
  fileRaw3.value = file.raw;
  let reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = (e: any) => {
    driveLicenseArr.value.push(e.target.result);
  };
  let formDataD = new FormData();
  formDataD.append('vehicleLicense', fileRaw3.value);
  /* 行驶证识别 */
  RequestBasicVehicleLicenseRecognizeBack(formDataD).then((res: any) => {
    console.log(JSON.parse(res.resultObj).words_result);
    carInfo.value.核定载人数 = JSON.parse(res.resultObj).words_result.核定载人数.words;
    carInfo.value.整备质量 = JSON.parse(res.resultObj).words_result.整备质量.words;
    carInfo.value.档案编号 = JSON.parse(res.resultObj).words_result.档案编号.words;
  });
};
/* ******************* 营业执照 ******************* */
const dialogImageUrl4 = ref('');
const dialogVisible4 = ref(false);
const disabled4 = ref(false);
const handleRemove4 = (file: UploadFile) => { };
const handlePictureCardPreview4 = (file: UploadFile) => {
  dialogImageUrl4.value = file.url!;
  dialogVisible4.value = true;
};
const fileRaw4 = ref();
const authorizationLetter = ref<any>();
const changeFile4 = (file: any) => {
  fileRaw4.value = file.raw;
  let reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = (e: any) => {
    authorizationLetter.value = e.target.result;
  };
};
/* ******************* 委托书 ******************* */
const uploadRef = ref<any>();
const companyLicense = ref<any>();
const fileUpload = (file: any) => {
  let reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = (e: any) => {
    companyLicense.value = e.target.result;
  };
  console.log('委托书', file.raw);
};
/* ******************* 异常情况 ******************* */
const falg = ref<any>(false); //缺件情况是否显示---完整&不显示or异常&显示
const abnormalities = (event: any) => {
  if (event == false) {
    // console.log('carInfo.value.整备质量', carInfo.value.整备质量);
    if (
      carInfo.value.整备质量 == undefined ||
      carInfo.value.核定载人数 == undefined ||
      carInfo.value.车辆类型 == undefined
    ) {
      ElMessage.error('需填写完车辆信息的所有内容');
      formData.value.abnormalities = true;
    } else {
      falg.value = true;
    }
  } else {
    falg.value = false;
    missfalg.value = false;
    formData.value.missingCase = false;
  }
};
/* ******************* 缺件情况 ******************* */
const missfalg = ref<any>(false); //true显示缺件详情

const missingCase = (event: any) => {
  console.log('eventevent', event);
  if (event == false) {
    missfalg.value = false;
    missingParts.value = [];
  } else if (event == true) {
    missfalg.value = true;
    RequestMissingPartDeductionGetSettingByQuery(
      JSON.parse(localStorage.getItem('roleInfo')!).company,
      carInfo.value.整备质量,
      carInfo.value.核定载人数,
      carInfo.value.车辆类型,
    ).then((res: any) => {
      missingParts.value = JSON.parse(res.resultObj.value);
      missingParts.value.forEach((item: any) => {
        item.number = 0;
        item.minNumber = 0;
      });
      console.log(missingParts.value);
    });
  }
};
let phoneReg = /^1[3456789]\d{9}$/;
const formDataRules = ref({
  name: [{ required: true, message: '请输入车主姓名' }],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: phoneReg, message: '请输入正确的手机号码', trigger: 'blur' },
  ],
});
const carInfoRules = ref({
  地址: [{ required: true, message: '请输入车辆所在地址' }],
  整备质量: [{ required: true, message: '请输入整备质量' }],
  发动机号码: [{ required: true, message: '请输入发动机号码' }],
  车辆识别代号: [{ required: true, message: '请输入车辆识别代号' }],
  使用性质: [{ required: true, message: '请输入使用性质' }],
  核定载人数: [{ required: true, message: '请输入核定载人数' }],
  品牌型号: [{ required: true, message: '请输入品牌型号' }],
  车辆类型: [{ required: true, message: '请输入车辆类型' }],
  号牌号码: [{ required: true, message: '请输入号牌号码' }],
  color: [{ required: true, message: '请输入车辆颜色' }],
  // mileage: [{ required: true, message: '请输入总里程数' }],
  name: [{ required: true, message: '请输入姓名' }],
  phone: [{ required: true, message: '请输入联系电话' }],
  appraise: [{ required: true, message: '请输入整车残值款' }],
});
const formDataRef = ref(null);
const carInfoRef = ref(null);
const carPutInbtn = async (formEl: any | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (formData.value.name != '' && formData.value.phone != '') {
        if (phoneReg.test(formData.value.phone)) {
          signDialog.value = true;
        } else {
          ElMessage.error('请填写正确的联系电话');
        }
      } else {
        ElMessage.error('请填写完整所有信息');
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};
const inputChange = async (formEl: any | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
    } else {
      console.log('error submit!', fields);
    }
  });
};
/* ******************* 手写签名 ******************* */
const canvas = ref('');
// 开始签名
function onMouseDown(e: any) {
  const el = e.target || e.srcElement;
  const ctx = el.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  el.onmousemove = function (e) {
    if (e.which === 0) {
      el.onmousemove = null;
      el.onmouseup = null;
      return;
    }
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  };
  el.onmouseup = function () {
    el.onmousemove = null;
    el.onmouseup = null;
  };
  el.focus();
}
// 取消
const cancle = () => {
  signDialog.value = false;
  clearPanel('');
};
// 清空签名
function clearPanel(e: any) {
  nextTick(() => {
    // const el = canvas;
    const ctx = canvas.value.getContext('2d');
    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
  });
}
// 确认签名
function confirm() {
  loading.value = true;
  nextTick(() => {
    try {
      // const canvas = this.$refs["canvas"];
      const blank = document.createElement('canvas'); // 创建一个空canvas对象
      blank.width = canvas.value.width;
      blank.height = canvas.value.height;
      console.log(canvas.value.toDataURL());
      console.log('formData', formData.value);
      console.log('carInfo', carInfo.value);
      console.log('fileRaw', fileRaw.value);
      console.log('idCardArr', idCardArr.value);
      console.log('driveLicenseArr', driveLicenseArr.value);
      console.log('fileRaw2', fileRaw2.value);
      console.log('missingParts', missingParts.value);
      console.log('carType', carType.value);
      RequestOrderDetailRecyclerSetOrder({
        idCard: idCardArr.value,
        driveLicense: driveLicenseArr.value,
        orderDetail: {
          color: carInfo.value.color, //颜色
          ifRetainPlate: ifRetainPlate.value, //是否保留牌照号码
          ifAccountClosure: ifAccountClosure.value, //是否销户
          phone: formData.value.phone, //电话
          personName: formData.value.name, //姓名
          missingPart: JSON.stringify(missingParts.value), //缺件情况
          appraise: carInfo.value.appraise,
        },
        estimateInfo: {
          mileage: carInfo.value.mileage, //里程数
          carInfo: JSON.stringify(carInfo.value), //车辆信息
          carType: carType.value, //车辆类型
          companyNode: JSON.parse(localStorage.getItem('roleInfo')!).company,
        },
        sign: canvas.value.toDataURL(), //签名
        authorizationLetter: authorizationLetter.value, //委托书
        companyLicense: companyLicense.value, //营业执照
        // trailerCarId: companyLicense.value,    		//委托人身份证
      }).then((res: any) => {
        if (res.success == true) {
          ElMessage.success(res.msg);
          loading.value = false;
          drawer.value = false;
          signDialog.value = false;
        } else {
          ElMessage.error(res.msg);
          loading.value = false;
        }
      });
    } catch (e) {
      console.warn(e);
    }
  });
}
/* ******************* 充值 ******************* */
const rechargeMoney = ref<any>(false);
const rechargeType = ref<any>([
  { id: 1, name: '行驶证识别' },
  // { id: 2, name: '单面识别(反)' },
  // { id: 3, name: '双面识别' },
]);
const rechargeMoneyList = ref<any>([
  { id: 0, money: 18, number: 100 },
  { id: 1, money: 28, number: 180 },
  { id: 2, money: 58, number: 360 },
  { id: 3, money: 88, number: 580 },
  { id: 4, money: 128, number: 960 },
  { id: 5, money: 158, number: 1360 },
  { id: 6, money: 258, number: 2580 },
  { id: 7, money: 358, number: 4380 },
  { id: 8, money: 558, number: 7200 },
]);
const rechargeTypeID = ref<any>(1);
const priceVal = ref<any>();
const rechargeTypeBtn = (event: any) => {
  rechargeTypeID.value = event.id;
  RequestRecognizeLeftGetRecognizeFee(event.id).then((res: any) => {
    priceVal.value = res.resultObj;
    // rechargeMoneyList.value.forEach((item: any) => {
    //     item.number = Math.ceil(item.money / priceVal.value)
    // });
  });
};
const rechargeMoneyDalog = () => {
  rechargeMoney.value = true;
  RequestRecognizeLeftGetRecognizeFee(1).then((res: any) => {
    priceVal.value = res.resultObj;
    // rechargeMoneyList.value.forEach((item: any) => {
    //     item.number = Math.ceil(item.money / priceVal.value)
    // });
  });
};
const rechargeMoneyID = ref<any>();
const rechargeMoneyVal = ref<any>();
const rechargeMoneyBtn = (event: any) => {
  rechargeMoneyVal.value = event;
  rechargeMoneyID.value = event.id;
};
/* 充值按钮 */
const rechargeTypeVal = ref<any>();
const rechargeSaveBtn = () => {
  if (rechargeTypeID.value == 1) {
    rechargeTypeVal.value = '行驶证识别';
  } else if (rechargeTypeID.value == 2) {
    rechargeTypeVal.value = '行驶证反页识别';
  } else {
    rechargeTypeVal.value = '行驶证正反页识别';
  }
  // console.log(rechargeTypeID.value);
  // console.log(rechargeMoneyVal.value.money);
  // console.log(rechargeMoneyVal.value.number);
  // console.log(rechargeTypeVal.value);
  if (rechargeMoneyVal.value == null) {
    ElMessage.error('请选择充值套餐');
  } else {
    RequestRecognizeLeftAddRecognizeNum(
      rechargeTypeVal.value,
      rechargeMoneyVal.value.number,
      rechargeMoneyVal.value.money,
    ).then((res: any) => {
      if (res.success == true) {
        ElMessage.success(res.resultObj);
        rechargeMoney.value = false;
      } else {
        ElMessage.error(res.msg);
      }
    });
  }
};

const exportExcel = () => {
  let nowDate = formatTimeHan(new Date());
  RequestScrapCarOutputExcel({
    page: 1,
    rows: 100000,
  }).then((res: any) => {
    if (res.type == 'application/json') {
      ElMessage.error('暂无数据导出');
    } else {
      exportFile(res, `${nowDate}所有整车数据报表`);
    }
  });
};
</script>

<style scoped lang="scss">
::v-deep .el-step__icon {
  width: 20px;
  height: 20px;
  font-size: 12px;
  text-align: center;
}

// ::v-deep .el-step__icon {
//   border-color: #A8ABB2 !important;
// }
::v-deep .el-step__title {
  font-size: 12px;
  line-height: 30px;
}

::v-deep .is-process {
  color: #a8abb2;
  font-weight: normal;

  .el-step__icon {
    border-color: #a8abb2;
  }
}

.rechargeType_li_hover {
  color: #fff;
  background-color: #116cf8;
  user-select: none;
  cursor: pointer;
  width: 32%;
  padding: 1rem 0;
  text-align: center;
  border-radius: 0.625rem;
}

.recharge {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  position: absolute;
  top: 0;
  left: 0;

  .left {
    width: 40%;
    height: 100%;
    border-radius: 1rem 0 0 1rem;
    background: url('../../../../assets/images/bg_Recharge.png') no-repeat left;
    background-size: cover;
  }

  .right {
    flex: 1;
    height: 100%;
    border-radius: 0 1rem 1rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #ecf5ff 1%, #ffffff 100%);

    .rechargeType {
      .rechargeType_li {
        user-select: none;
        cursor: pointer;
        width: 32%;
        padding: 1rem 0;
        text-align: center;
        color: #333333;
        background-color: #fff;
        border-radius: 0.625rem;

        &:hover {
          color: #fff;
          background-color: #116cf8;
          transition: 500ms;
        }
      }
    }

    .rechargeMoney_li_hover {
      width: 32%;
      padding: 1rem 0;
      // margin-bottom: 0.625rem;
      margin-top: 0.625rem;
      background-color: red;
      text-align: center;
      background: #e1f0ff;
      border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
      border: 0.0625rem solid #116cf8;
      user-select: none;
      cursor: pointer;
      transition: 500ms;

      p {
        font-size: 0.75rem;
        font-weight: 400;
        color: #333333;

        &:first-child {
          font-size: 1.25rem;
          font-weight: 600;
          color: #116cf8;
          margin-bottom: 0.625rem;

          span {
            font-size: 0.875rem;
            color: #116cf8;
          }
        }
      }
    }

    .rechargeMoney {
      .rechargeMoney_li {
        width: 32%;
        user-select: none;
        cursor: pointer;
        background: #ffffff;
        box-shadow: 0rem 0.25rem 0.625rem 0rem rgba(226, 234, 243, 0.3);
        border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
        opacity: 1;
        text-align: center;
        padding: 1rem;
        // margin-bottom: 0.625rem;
        border: 0.0625rem solid #ffffff;
        margin-top: 0.625rem;

        p {
          font-size: 0.75rem;
          font-weight: 400;
          color: #b2b2b2;

          &:first-child {
            font-size: 1.25rem;
            font-weight: 600;
            color: #333333;
            margin-bottom: 0.625rem;

            span {
              font-size: 0.875rem;
              color: #333333;
            }
          }
        }

        &:hover {
          background-color: red;
          text-align: center;
          background: #e1f0ff;
          border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
          border: 0.0625rem solid #116cf8;
          user-select: none;
          cursor: pointer;
          transition: 500ms;

          p {
            font-size: 0.75rem;
            font-weight: 400;
            color: #333333;

            &:first-child {
              font-size: 1.25rem;
              font-weight: 600;
              color: #116cf8;
              margin-bottom: 0.625rem;

              span {
                font-size: 0.875rem;
                color: #116cf8;
              }
            }
          }
        }
      }
    }
  }
}

.part {
  background-color: #f5f7fb;
  width: 100%;
  height: 1.875rem;
  line-height: 1.875rem;
  padding-left: 0.625rem;
}

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0 !important;

    .el-icon svg {
      color: #fff;
    }
  }

  .el-dialog__title {
    color: #fff;
  }
}

::v-deep .imgVisible {
  .el-dialog__body {
    padding: 0;
  }

  .el-icon svg {
    opacity: 0;
  }

  .el-dialog__header {
    padding: 0 !important;
    margin: 0 !important;
  }
}

.carImg {
  width: 4.375rem;
  height: 4.375rem;
  margin-right: 0.625rem;
  border-radius: 0.25rem;
}

/* 上传框 */
::v-deep .upload111 {
  width: 81.92px;
  height: 81.92px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px dashed #cdd0d6;
  position: relative;

  .el-upload-list__item,
  .el-upload-list__item-thumbnail,
  .el-upload {
    width: 80px;
    height: 80px;
  }

  .el-upload-list--picture-card .el-upload-list__item-actions {
    width: 80px;
    height: 80px;
  }

  .el-upload {
    opacity: 0;
  }

  .add {
    font-size: 36px;
    color: #cccccc;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
  }
}

.upload111:hover {
  border: 1px dashed #116cf8;
  transition: 500ms;

  .add {
    color: #116cf8;
    transition: 500ms;
  }
}

::v-deep .up {
  width: 81.92px;
  height: 81.92px;
}
</style>
